<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram: Shadow Motion</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define drawing parameters and coordinates
        const originX = 500;
        const originY = 380;
        const h1 = 220; // Height of the lamp post
        const h2 = 80;  // Height of the person
        const personDistFromO = 260; // Distance of the person from the lamp post base O

        // Calculate the position of the shadow's tip based on similar triangles
        // h1 / x1 = h2 / (x1 - x2)
        // h1 * (x1 - x2) = h2 * x1
        // h1*x1 - h1*x2 = h2*x1
        // x1 * (h1 - h2) = h1 * x2
        // x1 = (h1 * x2) / (h1 - h2)
        const shadowTipDistFromO = (h1 * personDistFromO) / (h1 - h2);

        const personX = originX - personDistFromO;
        const shadowTipX = originX - shadowTipDistFromO;

        // --- Helper function to draw arrows ---
        function drawArrow(ctx, fromx, fromy, tox, toy, arrowHeadLength = 10) {
            const angle = Math.atan2(toy - fromy, tox - fromx);
            // Draw the line
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            // Draw the arrowhead
            ctx.lineTo(tox - arrowHeadLength * Math.cos(angle - Math.PI / 6), toy - arrowHeadLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - arrowHeadLength * Math.cos(angle + Math.PI / 6), toy - arrowHeadLength * Math.sin(angle + Math.PI / 6));
        }
        
        // --- Drawing functions ---

        // 1. Draw the ground
        ctx.beginPath();
        ctx.moveTo(shadowTipX - 80, originY);
        ctx.lineTo(originX + 20, originY);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.stroke();

        // 2. Draw the lamp post
        // Post
        ctx.beginPath();
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX, originY - h1);
        ctx.stroke();
        // Lamp fixture
        const lampTopX = originX;
        const lampTopY = originY - h1;
        ctx.beginPath();
        ctx.moveTo(lampTopX - 15, lampTopY);
        ctx.lineTo(lampTopX + 15, lampTopY);
        ctx.lineTo(lampTopX, lampTopY - 12);
        ctx.closePath();
        ctx.stroke();
        // Light bulb
        ctx.beginPath();
        ctx.arc(lampTopX, lampTopY + 2, 5, 0, 2 * Math.PI);
        ctx.stroke();

        // 3. Draw the person (stick figure)
        const personHeadY = originY - h2;
        ctx.beginPath();
        // Head
        ctx.arc(personX, personHeadY - 5, 10, 0, 2 * Math.PI); 
        // Body
        ctx.moveTo(personX, personHeadY);
        ctx.lineTo(personX, originY - 25);
        // Legs
        ctx.moveTo(personX, originY - 25);
        ctx.lineTo(personX - 15, originY);
        ctx.moveTo(personX, originY - 25);
        ctx.lineTo(personX + 10, originY - 5);
        ctx.stroke();

        // 4. Draw the light ray (dashed line)
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(lampTopX, lampTopY);
        ctx.lineTo(shadowTipX, originY);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // 5. Draw labels and arrows
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Label h1
        ctx.beginPath();
        drawArrow(ctx, originX + 30, originY, originX + 30, lampTopY);
        ctx.moveTo(originX + 25, originY);
        ctx.lineTo(originX + 35, originY);
        ctx.moveTo(originX + 25, lampTopY);
        ctx.lineTo(originX + 35, lampTopY);
        ctx.stroke();
        ctx.fillText('h', originX + 45, originY - h1 / 2);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('1', originX + 52, originY - h1 / 2 + 5);
        
        // Label h2
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('h', personX + 30, originY - h2 / 2);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('2', personX + 37, originY - h2 / 2 + 5);

        // Label O
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('O', originX, originY + 20);

        // Label x1
        ctx.fillText('x', shadowTipX, originY + 20);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('1', shadowTipX + 7, originY + 25);
        
        // Label x2
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('x', personX, originY + 20);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('2', personX + 7, originY + 25);

        // Motion arrow for x1
        ctx.beginPath();
        ctx.moveTo(shadowTipX, originY - 15);
        drawArrow(ctx, shadowTipX + 30, originY - 15, shadowTipX - 30, originY - 15);
        ctx.stroke();
        
        // Figure caption
        ctx.font = '20px "SimSun", "STSong"'; // Common Chinese fonts
        ctx.textAlign = 'center';
        ctx.fillText('题 4 图', canvas.width / 2, 430);

    </script>
</body>
</html>